<template>
    <div class="q-header">
        <div class="box-header">供热燃气安全智慧监管平台</div>
        <div class="left-header"><p>燃气业务平台</p></div>
        <div class="right-header"><p>热力业务平台</p></div>
    </div>
</template>
<style lang="less" scoped>
.q-header{
    width: 100%;
    height: 120px;
    line-height: 75px;
    background-color: rgba(35, 33, 117, 0.2);
    background-image: url(@/assets/images/cockpit/header.png);
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    .box-header{
        top: 20px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 504px;
        height: 60px;
        font-size: 40px;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 60px;
        text-shadow: 0px 0px 4px #1751C9;
    }
    .left-header,
    .right-header{
        width: 525px;
        height: 55px;
        font-size: 30px;
        line-height: 75px;
        text-align: center;
        color: #00FFF8;
        font-weight: bold;
        position: absolute;
        background-image: url(@/assets/images/cockpit/title.png);
        p{
            display: inline-block;
            width: 279px;
            height: 33px;
            font-size: 24px;
            font-weight: 500;
            color: #12FFF3;
            line-height: 33px;
            text-shadow: 0px 1px 4px rgba(0,36,208,0.8);
        }
    }
    .left-header{
        left: 30px;
        top: 60px;
    }
    .right-header{
        right: 50px;
        top: 60px;
    }
}
</style>